<template>
  <div class="doodle-view" :style="{width: 'auto'}">
    <!-- 操作按钮群 -->
    <div class="doodle-handle">
      <div class="doodle-btn-cross">
        <el-button class="doodle-btn" :disabled="imagesList.length <= 1 || imagesIndex == 0" @click="back">
          <el-icon><ArrowLeftBold /></el-icon>
        </el-button>
        <el-button class="doodle-btn" :disabled="imagesList.length <= 1 || imagesIndex == 1" @click="redo">
          <el-icon><ArrowRightBold /></el-icon>
        </el-button>
      </div>
    </div>

    <div class="doodle-view-content" v-loading='loading' :style="{height: height+'px'}">
      <img class="doodle-img" :src="baseImage" :width="loading ? 0 : imgWidth" :height="loading ? 0 : imgHeight" @load="resetZoom" />

      <div class="float-btn" v-if="showFloatBtn" @click="repairClick">
        <el-icon class="btn-icon loading" v-if="computeing"><Loading /></el-icon>
        <el-icon class="btn-icon" v-else><View /></el-icon>
        <div>
          <div>高清还原</div>
          <div class="min-font">消耗算力</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
/** 高清修复 */
/* eslint-disable */
import WebRequest from '@/unit/request.js'
export default {
  name: 'Repair',
  props: {
    // 图片url
    src: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: Number,
      default: 500
    },
    // 高度
    height: {
      type: Number,
      default: 300
    },
    // 计算中
    // computeing: {
    //   type: Boolean,
    //   default: false
    // },
  },
  data () {
    return {
      history: [],          // 历史记录
      historyIndex: -1,     // 历史记录下标
      dragging: false,      // 是否绘制中
      isClear: false,       // 是否为擦除模式
      imgWidth: 500,        // 图像原始宽度，同时作用于画布
      imgHeight: 300,       // 图像原始高度，同时作用于画布
      zoom: 1,              // 缩放比例
      markImageOriginal: null,      // 原始遮罩图：base64
      markImage: null,      // 遮罩图：base64
      loading: false,       // 图片是否加载中
      computeing: false,    // 计算中
      showFloatBtn: false,  // 展示浮动按钮（图片加载成功后展示）

      baseImage: '',
      imagesList: [],       // 图片列表，0为原图，1为高清还原后的图片
      imagesIndex: 0,       // 当前图片下标
  
      canvas: null,
      ctx: null,
      canvasPos: null,
      shadowCanvas: null,
      shadowCtx: null,
      shadowHistory: [],

      savePants: null,
    }
  },
  created() {
    setTimeout(() => {
      this.init()
    }, 500)
  },
  watch: {
    src: {
      handler() {
        this.baseImage = this.src
        this.resetAll()
      },
      immediate: true
    },
  },
  methods: {
    /** 重置 */
    reset() {
      console.log('select')
    },
    /** 初始化 */
    init() {
    },
    back() {
      this.imagesIndex = 0
      this.baseImage = this.imagesList[0]
    },
    redo() {
      this.imagesIndex = 1
      this.baseImage = this.imagesList[1]
    },
    /** 重置比例 */
    resetZoom(e) {
      this.loading = true
      let img = new Image()
      img.src = this.src
      this.imagesList[0] = this.src
      img.onload = (e2) => {
        let w = e2.currentTarget.width
        let h = e2.currentTarget.height
        // 计算纵横比
        let width = this.width
        let height = parseInt(h * (this.width / w))
        if (w >= h) {
          if (height > this.height) {
            width = parseInt(w * (this.height / h))
            height = this.height
          }
          this.zoom = w / width
        } else {
          width = parseInt(w * (this.height / h))
          height = this.height
          if (width > this.width) {
            width = this.width
            height = parseInt(h * (this.width / w))
          }
          this.zoom = h / height
        }
        this.imgWidth = width
        this.imgHeight = height
        this.loading = false
        this.showFloatBtn = true
      }
    },
    /** 重置所有设置 */
    resetAll() {
      // 重新读取图片和比例
      this.resetZoom()
    },
    /** 变更图片 */
    onChangeImage() {
      this.resetAll()
    },

    repairClick() {
      this.onSubmit()
      // this.$emit('repairClick', true)
    },

    onSubmit(e){
      if (this.computeing) return

      this.computeing = true;
      WebRequest.PreConsumerPoint({
        serviceType: 5,
        callback: (res) => {
          if(res.data.errCode == 10000){
            var coseId = res.data.data.id;
            var extendValue = JSON.stringify({
              operationId: '5',
              operationName: '高清还原',
              originalImage: this.baseImage,
              resultImage: ''
            })
            // 提交需要高清还原的图片
            WebRequest.Upscaling({
              costId: coseId,
              imgUrl: this.src,
              extendValue,
              sourceImageDepotId: '',
              callback: (e) => {
                if(e.data.errCode == 10000){
                  var resultImgUrl = e.data.data.imgUrl
                  this.imagesList[1] = e.data.data.imgUrl
                  this.imagesIndex = 1
                  this.$message({
                    message: '扣费请求失败',
                    type: 'success'
                  })
                }else{
                  this.$message({
                    message: '高清还原失败',
                    type: 'error'
                  })
                }
                this.computeing = false
              },
              error: (e) => {
                this.$message({
                  message: '高清还原请求失败',
                  type: 'error'
                })
                this.computeing = false
                console.log('高清还原接口请求异常',e)
              }
            })
          } else {
            this.$message({
              message: '扣费失败',
              type: 'error'
            })
            this.computeing = false
            console.log('扣费失败',res)
          }
        },
        error: (e) => {
          this.$message({
            message: '扣费请求失败',
            type: 'error'
          })
          this.computeing = false
          console.log('扣费接口请求异常',res)
        }
      })
    },

    /** 输出 */
    output() {
      this.$emit('comfirm', {url: this.imagesList[1] || null})
    },

  }
}
</script>
<style src="./index.scss" lang="scss"></style>
